<template>
  <div class="_wrap">
    <div class="_top">
      <div class="item">
        <subTit title="学校数" />
        <div class="__num">
          <img src="@/assets/imgHome/icon2.svg" />
          <count-to
            class="val"
            :start-val="0"
            :end-val="totalAmount"
            :decimals="0"
            :duration="3600"
          />
        </div>
        <div class="__num_bj">
          较上年同期：<count-to
            class="val"
            :start-val="0"
            :end-val="periodAmount"
            :decimals="0"
            :duration="3600"
          /><span class="unit">%</span><img src="@/assets/imgHome/icon3.svg" />
        </div>
      </div>
      <div class="line"></div>
      <div class="item">
        <subTit title="学生人数" />
        <div class="__num">
          <img src="@/assets/imgHome/icon1.svg" />
          <count-to
            class="val"
            :start-val="0"
            :end-val="totalArea"
            :duration="3600"
          />
        </div>
        <div class="__num_bj">
          较上年同期：<count-to
            class="val"
            :start-val="0"
            :end-val="sameAmount"
            :decimals="0"
            :duration="3600"
          /><span class="unit">%</span><img src="@/assets/imgHome/icon4.svg" />
        </div>
      </div>
    </div>
    <div class="divider"></div>
    <div class="chartBox">
      <eChart :option="option"></eChart>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import countTo from "vue-count-to";
import subTit from "../components/subTit";
export default {
  name: "itemLeftTop",
  components: { countTo, subTit },
  data() {
    return {
      totalAmount: 342,
      totalArea: 149281,
      periodAmount: 3,
      sameAmount: 6,
      option: {},
    };
  },
  mounted() {
    let obj = {
      xAxisData: ["2023春季学期", "2023秋季学期", "2024春节学期"],
      seriesData: [
        {
          name: "学校数",
          data: [
            { value: 342, unit: "个" },
            { value: 338, unit: "个" },
            { value: 335, unit: "个" },
            { value: 332, unit: "个" },
            { value: 342, unit: "个" },
          ],
        },
        {
          name: "学生数",
          data: [
            { value: 138523, unit: "人" },
            { value: 129823, unit: "人" },
            { value: 142562, unit: "人" },
            { value: 158237, unit: "人" },
            { value: 149281, unit: "人" },
          ],
        },
      ],
    };
    this.option = this.getOption(obj);
  },
  methods: {
    getOption({ xAxisData, seriesData }) {
      let yAxisMax = 0;
      let arr = _.sortBy(
        [...seriesData[0].data, ...seriesData[1].data],
        [(o) => -o.value]
      );
      let numArr = Math.trunc(arr[0].value).toString().split("");
      let res = [];
      for (let i = 0; i < numArr.length; i++) {
        let n = 0;
        if (i <= 1) {
          n = Number(numArr[i]);
        }
        res.push(n);
      }
      console.log(res, "---yAxisMax");
      return {
        color: ["#33EDFD", "#0776D1"],
        legend: {
          top: "15px",
          left: 150,
          data: ["学校数", "学生数"],
          icon: "rect",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: 16,
          },
        },
        grid: {
          left: "5px",
          right: "10px",
          top: "50px",
          bottom: "2px",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: (params) => {
            let html = "";
            for (let i = 0; i < params.length; i++) {
              const formatNum = (value) => {
                if (!value && value !== 0) return 0;
                let str = value.toString();
                let reg =
                  str.indexOf(".") > -1
                    ? /(\d)(?=(\d{3})+\.)/g
                    : /(\d)(?=(?:\d{3})+$)/g;
                return str.replace(reg, "$1,");
              };
              let val = params[i].value ? params[i].value : 0;
              let name = i === 0 ? `<div>${params[i].name}</div>` : "";
              html += `
                  <div class="tooltip">
                    ${name}
                    <div class="item">
                        <div class="${i > 1 ? "marker" : ""}">${
                params[i].marker
              }</div>${params[i].seriesName}<span>${formatNum(val)}</span>${
                params[i].data.unit
              }
                    </div>
                  </div>
                `;
            }
            return html;
          },
          textStyle: {
            // fontSize: 32,
            color: "#fff",
          },
          borderColor: "rgba(0,161,255,0.42)", // transparent
          backgroundColor: " rgba(1,33,59,0.65)", // transparent
          padding: [5, 10],
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: xAxisData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255, .16)",
            },
          },
          axisLabel: {
            interval: 0,
            fontSize: 14,
            color: "rgba(255,255,255,0.8)",
          },
        },
        yAxis: [
          {
            name: "数量：所",
            type: "value",
            min: 0,
            max: 150000,
            // interval: 100,
            nameTextStyle: {
              align: "center",
              fontSize: 16,
              color: "#fff",
            },
            axisLabel: {
              formatter: "{value}",
              fontSize: 14,
              color: "rgba(255,255,255,0.8)",
            },
            splitLine: {
              show: true, // 是否显示分隔线
              lineStyle: {
                color: "rgba(255,255,255,0.16)",
                type: "dashed",
                width: 1,
              },
            },
            axisLine: {
              show: false,
            },
            splitArea: {
              show: false, // 是否显示分隔区域
            },
          },
        ],
        series: seriesData.map((item) => {
          return {
            ...item,
            type: "line",
          };
        }),
      };
    },
  },
};
</script>

<style scoped lang="scss">
._wrap {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 80px 4px auto;
  grid-gap: 24px;
  ._top {
    /*display: grid; grid-template-columns: 1fr 1fr;*/
    display: flex;
    justify-content: space-between;

    .item {
      width: 192px;
      .__num {
        display: flex;
        align-items: center;
        margin-top: 7px;
        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
        .val {
          font-size: 24px;
          color: #00fffa;
          letter-spacing: 1.44px;
          font-family: DINPro;
          margin-right: 6px;
        }
        .unit {
          font-size: 16px;
          font-family: PingFangSC;
          white-space: nowrap;
        }
      }

      .__num_bj {
        font-size: 16px;
        margin-top: 10px;
        letter-spacing: 1px;
        img {
          margin: 0 0px 0px 3px;
        }
      }
    }
    .line {
      width: 1px;
      height: 100%;
      background-image: linear-gradient(
        rgba(255, 255, 255, 0.3) 3px,
        hsla(0, 0%, 100%, 0) 0
      );
      background-size: 1px 6px;
      background-repeat: repeat-y;
      margin-top: 10px;
    }
  }
  .divider {
    position: relative;
    top: 28px;
    width: 100%;
    background: url("~@/assets/imgSchoolHouse/divider_s.svg") no-repeat;
  }

  .chartBox {
    margin-top: 14px;
  }
}
::v-deep .tooltip {
  .item {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    .marker {
      visibility: hidden;
    }
    span {
      color: #00fffa;
      font-family: DINPro;
      font-size: 16px;
      margin: 0 6px;
    }
  }
}
</style>
